<template>
  <div class="data_table">
    <div ref="mychart" id="mychart"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts"

  import { dataTableMethods } from 'common/mixin'

  export default {
    name: 'data_table_pie',
    mixins: [ dataTableMethods ],
    data() {
      this.myEcharts = null
      return {
        option: null,
        ydata: [ // TODO: 数据从接口处获取
          [],
          [40, 20, 50, 30, 80, 50, 60, 30, 60, 40],
          [20, 30, 25, 15, 25, 30, 25, 20, 40, 10],
          [20, 35, 35, 10, 40, 55, 30, 50, 20, 15],
          [],
          [],
          [15, 20, 25, 15, 45, 20, 35, 15, 20, 25],
          [],
          []
        ],
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        color0: [
          "#5470c6aa",
          "#91cc75aa",
          "#fac858aa",
          "#ee6666aa",
          "#73c0deaa",
          "#3ba272aa",
          "#fc8452aa",
          "#9a60b4aa",
          "#ea7cccaa"
        ]
      }
    },
    props: {
      titles: {
        type: Array,
        default() {
          return []
        }
      },
      categoryIndex: {
        type: Number,
        default: 0
      }
    },
    mounted() {
      // 1.初始化
      this.myEcharts = echarts.init(this.$refs.mychart, null, {renderer: 'svg'})

      // 2.设置 echarts 数据
      // 设置 x,y 轴数据
      let nowDate = new Date().getDate();
      let xdata = [];
      for(let i = nowDate - 10; i <= nowDate; i++) {
        xdata.push(i + '日');
      }

      // 3.设置配置项
      this.option = {
        title: {
          text: '全部开销',
          textStyle: {
            fontSize: this.fontSize(18)
          }
        },
        // 提示框
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: this.fontSize(14)
          },
          position: this.changePosition()
        },
        xAxis: [
          {
            data: xdata,
            axisLabel: {
              fontSize: this.fontSize(12)
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              fontSize: this.fontSize(12)
            }
          }
        ],
        series: [
          {
            name: "原价",
            type: "line", // 折线图
            data: this.ydata[0],
            color: '#F26A62',
          },
          {
            name: "折后",
            type: "bar",
            data: this.ydata[0],
          }
        ]
      }
      // 4.绘制图表
      this.myEcharts.setOption(this.option)

      // 5.随浏览器窗口变动，变化大小
      window.onresize = function() {
        this.myEcharts.resize();
      }
    },
    methods: {
      // 当父组件切换类目时，进行数据更新
      tableOtherUpdate() {
        this.option.title.text = this.titles[this.categoryIndex] + '开销'; // 传入标题
        this.option.series[0].data = this.ydata[this.categoryIndex]; // 传入 y 轴数据
        this.option.series[1].data = this.ydata[this.categoryIndex].map(num => num * 0.65); // 传入 y 轴数据
        this.option.series[0].color = this.color[this.categoryIndex]; // 传入折线颜色
        this.option.series[1].color = this.color0[this.categoryIndex]; // 传入柱形颜色
        this.myEcharts.setOption(this.option); // 重新渲染
      }
    }
  }
</script>

<style scoped>
  .data_table {
    margin: 0 auto;
    width: 90%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
  }

  #mychart {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    border: 1px solid #eee;
  }
</style>
